<template>
  <div>
    <div class="qq">
    <div class="registration-container">
        <h1>注册</h1>
        <p class="subtitle">加入我们，开始新的冒险</p>
        <div id="registrationForm">
            <div class="input-group">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="输入用户名" required v-model="input1">
            </div>
             <div class="input-group">
                <label for="username">邮箱</label>
                <input type="text" id="Email" placeholder="输入用户名" required v-model="input2">
            </div>
            <div class="input-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="输入密码" required v-model="input3">
            </div>
            <button type="submit" @click="zc()" class="q4">注册</button>
        </div>
        <div id="message"></div>
        <div class="footer">
        </div>
    </div>
  </div>
  </div>
</template>

<script>
import {zhu} from '@/utlis/https'


export default {
  data() {
    return {
        input1:'',
        input2:'',
        input3:'',
        input4:'',

    }
  },
  mounted() {
  },
  methods: {
    zc(){
         zhu({
        name:this.input1,
        pwd:this.input3,
        emails:this.input2
    })
    .then((val) =>{
        console.log(val)
        if(val.msg != '用户名重复'){
           this.$router.push('/deng')
        }else{
            alert('用户名重复')
        }
    })
    .catch((e) =>{
        console.log(e);
    })


        localStorage.setItem('username',this.input1) 
        // localStorage.setItem('Email',this.input2)
        localStorage.setItem('password',this.input3)

    },
  },
  computed: {
  },
}
</script>
<style lang='less' scoped>
.qq{
     display: flex;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    background: radial-gradient(ellipse at bottom, #20ba84 0%, #e0e6df 100%) fixed;    
    font-family: 'Press Start 2P', cursive;
}
.registration-container {  
    background: #ffffff; /* 白色背景 */ 
    background: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.wm1PU3kJUJ9i7LFUhXLV8AHaEK?w=322&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7");
    padding: 20px;  
    border: 5px solid #333; /* 深色边框 */  
    border-radius: 10px;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  
    max-width: 400px;  
    width: 100%;  
    text-align: center;   
}  
h1 {  
    margin-bottom: 10px;  
    color: #333; /* 字体颜色 */  
    font-size: 24px;  
}  

.subtitle {  
    margin-bottom: 20px;  
    color: #555; /* 字体颜色 */  
    font-size: 14px;  
}  

.input-group {  
    margin-bottom: 20px;  
    text-align: left;   
}  

label {  
    display: block;  
    margin-bottom: 5px;  
    font-weight: bold;  
    color: #333;  
}  

input {  
    width: 100%;  
    padding: 10px;  
    border: 3px solid #666; 
    border-radius: 5px;  
    background: #fafafa; 
    color: #333; 
    font-size: 14px;  
    box-sizing: border-box;
    transition: border-color 0.3s;  
}  

input:focus {  
    border-color: #459e54; 
    outline: none;  
}  

button {  
    width: 100%;  
    padding: 10px;  
    background-color: #528e64; 
    color: rgb(0, 0, 0); 
    border: none;  
    border-radius: 5px;  
    font-weight: bold;  
    cursor: pointer;  
    transition: background-color 0.3s;  
    font-size: 16px;   
}  

button:hover {  
    background-color: #49b190; 
}  

#message {  
    text-align: center;  
    margin-top: 15px;  
    color: red;  
}  

.footer {  
    text-align: center;  
    margin-top: 20px;  
}  

.footer a {  
    color: #000000; 
    text-decoration: none;  
}  

.footer a:hover {  
    text-decoration: underline;  
}   
.subtitle{
    color: #000000;
}
.q4{
    position: relative;
    top: 20px;
}

</style>